扩展插件二次开发地图
在项目中 URL 参数 map=true 时，会自动加载地图，并初始化地图。
地图基于mapboxgl创建并结合显示的 CAD 图纸叠加在 mapbox 的自定义图层中, 我们可以实现地图的二次开发项目。 项目目前基于 "mapbox-gl": "2.8.2" 版本开发。 地理坐标系和 AutoCAD 绘图使用的坐标单位转换
初始化配置
ts
import { MxCADPluginBase, MxCADUI } from "mxcad";
import { MxFun } from "mxdraw";
class MxCADPlugin extends MxCADPluginBase {
constructor() {
super();
// 默认初始化时的地图数据
this.map_default_data = {
/** 地图与CAD图纸的对齐位置 */
mapOrigin: [114.06825863001939, 22.54283198132819],
/** CAD图纸与地图的对齐点 */
cadOrigin: [0, 0],
/** 地理坐标系和 CAD 绘图使用的坐标单位转换 */
meterInCADUnits: 1,
/** mapbox地图token */
mapbox_accessToken: "xxxx",
/** 需要打开的cad图纸 */
openFile: "demo/road.dwg.mxweb",
/** 栅格瓦片图层列表 */
rasterTileLayerList: [],
/** 矢量瓦片关键词*/
rasterTileKey: "mapbox://styles/mapbox/satellite-v9",
providers: [],
/** 背景颜色 */
viewColor: {
red: 255,
green: 255,
blue: 255,
},
};
}
}
let mxcadUi: MxCADUI;
MxFun.on("mxcadApplicationStart", (mxcadUiImp: MxCADUI) => {
mxcadUi = mxcadUiImp;
mxcadUi.init(new MxCADPlugin());
});
// 监听地图初始化事件
MxFun.on("mxcadApplicationInitMap", () => {
// 通过暴露的mxmap 对地图做一些设置
const mxmap = mxcadUi.mxmap;
// 得到mapbox的地图实例
const map = mxmap.getMapbox();
});| 初始化配置 | 详细说明 |
|---|---|
| mapOrigin | 这里是记录一个经纬度, 这个经纬度的点是与 cadOrigin 这个 CAD 图纸对齐的, 也就是确定图纸显示在地图上的哪个经纬度上 |
| cadOrigin | CAD 图纸与地图 mapOrigin 对齐点，比如图纸的 0，0 点， 对应在地图上的经纬度就是 mapOrigin 上的经纬度位置 |
| meterInCADUnits | 地理坐标系和 CAD 绘图使用的坐标单位转换, 比如 CAD 图纸 1 单位是地图中的多少米 , 这个值 是 1 就是 1:1 的的关系， CAD 中的 1 单位就是地图中的 1 米 |
| mapbox_accessToken | mapbox 地图 token 要使用 mapbox 提供的地图就需要 token，具体请查官方文档 |
| openFile | 需要打开的 cad 图纸(这里的图纸是特定的文件 mxweb 文件) |
| rasterTileLayerList | 栅格瓦片图层列表 是在地图打开时需要添加的图层 ID 并且指定具体地址例如: [["gdsl", "GaoDe.Normal.Map"]]这里就会在初始化时创建一个gdslid 的图层, 然后设置的源是GaoDe.Normal.Map 这个地址 , 这个地址需要在providers中提供，providers 中设置{ GaoDe: { Normal: { Map: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}' } } } |
| rasterTileKey | 矢量瓦片关键词 是 API 密钥 比如一些提供的源需要 API 密钥， 可以在这里填写。 比如天地图的 API: "http://t{s}.tianditu.com/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk={key}", 其中{key}就是 API 密钥, 我们需要在 rasterTileKey设置 |
| providers | 地图提供商 格式： providers 中设置{ GaoDe: { Normal: { Map: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}' } } } 在 rasterTileLayerList 中这样使用它:[["gdsl", "GaoDe.Normal.Map"]] |
| viewColor | 背景颜色 |
TIP
rasterTileLayerList 和 providers 在初始化时是有必要的，当然你也可以通过 mapbox 的地图实例自己添加图层， 如何添加图层请自行查看mapbox 的文档
mapbox-gl
mapbox-gl 是 mapbox 的 js 库， 在项目中已经集成，你可以在插件中直接使用， 具体请查看mapbox-gl 的文档
在扩展插件中你可以直接访问mapboxgl, 因为mapbox-gl已经挂载在 window 对象上。
你可以正常使用"mapbox-gl": "2.8.2" 版本的 api 继续对地图进行开发，mxcad 中绘制编辑图纸并不会影响它， 因为 mxcad 中绘制的 CAD 图纸始终放在一个 mapbox 提供的 webgl 层上。
我们可以在标准的扩展插件工程中找到 vite.config.ts 文件， 在external中添加mapboxgl， 这样在打包时就不会将mapboxgl打包到插件中, rollupOptions.output.globals 增加"mapbox-gl": "mapboxgl"属性。
最后安装mapbox-gl@2.8.2的依赖， 就可以在 ts 文件中直接引入它。
ts
import mapboxgl from "mapbox-gl";